<template>
    <!---->
    <div class="login">
        <div class="loginDiv">
            <div class="title">
                <h1 class="login-title">缺陷跟踪系统</h1>
                <h3 class="l-title">登录</h3>
            </div>
            <div class="main">
                <el-form :model="loginForm" label-width="100px"
                        :rules="rules" ref="loginForm">
                    <el-form-item prop="username">
                        <el-input style="width: 200px" type="text" v-model="loginForm.username"
                                autocomplete="off" size="small" placeholder="请输入账号"></el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input style="width: 200px" type="password" v-model="loginForm.password"
                                show-password autocomplete="off" size="small" placeholder="请输入密码"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="this.confirm" style="width: 200px">登录</el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="text" @click="forget">忘记密码</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
import login from '../../api/login.js'
    export default {
        name: "Login",
        data(){
            return{
                loginForm:{
                    username:'',
                    password:''
                },
                rules:{
                    username: [
                        { required: true, message: '请输入用户名', trigger: 'blur' },
                        { min: 5, max: 6, message: '用户名长度在 5 到 6 个字符', trigger: 'blur' }
                    ],
                    password: [
                        { required: true, message: '请输密码', trigger: 'blur' },
                        { min: 3, max: 6, message: '密码长度在 3 到 6 个字符', trigger: 'blur' }
                    ]
                }
            }
        },
        methods:{
            confirm(){
                if(this.loginForm.username === '' || this.loginForm.password === ''){
                    alert('账号或密码不能为空');
                }else{
                    login.login(this.loginForm)
                    .then((res) => {
                        if (res.code === 200) {
                            var info = JSON.stringify(res.data.data)
                            this.$message.success('登录成功')
                            this.$router.push('/home')
                        }
                    })
                    .catch((err) => {
                        console.log("err", err);
                        this.$message.error('登录失败')
                    })
                }
            },
            forget(){
                console.log("即将跳转"),
	            //这一步是为了验证是否跳转成功，如果成功就会打印，否则出错
	            this.$router.push({name: 'forget'})
	            //这一步就是跳转语句，path是形参,在template里面应该写一个实参传参数引进来
            },
        },            
    }
</script>

<style scoped >
    .login {
        width: 100%;
        height: 100%;
    }
    .loginDiv {
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -200px;
        margin-left: -250px;
        width: 450px;
        height: 350px;
        background: #fff;
        border-radius: 5%;
    }
    .title {
        width: 450px;
        height: 150px;
        background-color: rgb(113, 201, 239);
    }
    .login-title {
        margin: 10px;
        padding-top: 40px;
        padding-bottom: 10px;
        text-align: center;
    }
    .l-title {
        text-align: center;
        padding-top: 0px;
        color: white
    }
    .main {
        width: 400px;
        height: 250px;
        margin-top: 150px;
        position: absolute;
        text-align: center;
        top: 25px;
        right: 65px;
    }
</style>
